<template>
  <div class="api-example">
    <v-dialog
      :title="title"
      :before-close="handleClose"
      :visible.sync="dialogVisible">
      <div class="item">
        <div class="desc">
          API：
        </div>
        <div class="value">
          /notice
        </div>
      </div>
      <div class="item">
        <div class="desc">
          方式：
        </div>
        <div class="value">
          POST
        </div>
      </div>
      <div class="item">
        <div class="desc">
          数据：
        </div>
        <div class="value">
          <pre v-html="currentMock">
            <!-- {{currentMock}} -->
          </pre>
        </div>
      </div>
      <div class="item">
        <div class="desc">
          说明：
        </div>
        <div class="value">
          <div class="">
            *第三方申请token后再调用API <br>
            *确保应用的key与secret是Workplus管理后台创建的内部应用
          </div>
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import { fixAvatarPath, sessionStorage } from '@/utils/tools';

export default {
  name: 'api-example',
  props: {
    added: {
      type: Function,
    },
  },
  data(){
    const title = this.$t('addBlock.dialog.apiExample.title');
    const sureBtnText = this.$t('common.buttons.sure');
    const cancelBtnText = this.$t('common.buttons.cancel')
    return {
      title,
      sureBtnText,
      cancelBtnText,
      dialogVisible: false,
      appId: '',
      data: {
        'token': 'xxx',
        'appId': 'xxxx', //第三方应用ID
        'clientIds': ['user1', 'user2'],//用户id标识
        'content': '消息内容'
      }
    }
  },
  methods: {
    open(obj) {
      if(obj.appId){
        this.appId = obj.appId;
      };
      this.dialogVisible = true;
    },
    getExampleImageUrl(){
      const user = sessionStorage.get("login_user", true);
      return fixAvatarPath(user.avatar);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    syntaxHighlight(json) { //格式化json
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
  },
  computed: {
    currentMock(){
      if(this.appId){
        this.data.appId = this.appId;
      }
      let json = this.syntaxHighlight(this.data);
      return json;
    }
  },
  mounted(){
  },
  components: {
  }
}
</script>

<style lang='less'>
  .api-example{
    .item{
      display: flex;
      margin-bottom: 20px;
      .desc{
        color: black;
        margin-bottom: 5px;
        width: 80px;
        display: flex;
        justify-content: flex-end;
      }
      .value{
        flex: 1;
        word-break: break-all;
        .example{
          background: #efefef;
        }
        pre{
          .string { color: green; }
          .number { color: darkorange; }
          .boolean { color: blue; }
          .null { color: magenta; }
          .key { color: red; }
          span{
            white-space: normal;
          }
        }
      }
    }

  }
</style>
